<template>
    <div class="not-found-container">
      <el-row justify="center" align="middle" class="content">
        <el-col :span="24" class="text-center">
          <el-icon :size="100" class="icon">
            <Warning />
          </el-icon>
          <h1 class="title">401 - 暂无权限</h1>
          <p class="description">抱歉，您没有权限访问该页面，请联系管理员</p>
          <el-button type="primary" @click="goHome" class="home-button">
            返回首页
          </el-button>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script setup>
  import { Warning } from '@element-plus/icons-vue';
  import { useRouter } from 'vue-router';
  
  const router = useRouter();
  
  const goHome = () => {
    router.push('/');
  };
  </script>
  
  <style scoped lang="scss">
  .not-found-container {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8fafc;
  
    .content {
      max-width: 600px;
      padding: 20px;
    }
  
    .icon {
      color: #f59e0b;
      margin-bottom: 20px;
    }
  
    .title {
      font-size: 32px;
      font-weight: 600;
      color: #1f2937;
      margin-bottom: 16px;
    }
  
    .description {
      font-size: 16px;
      color: #6b7280;
      margin-bottom: 24px;
    }
  
    .home-button {
      padding: 12px 24px;
      font-size: 14px;
      border-radius: 8px;
      background-color: #10b981;
      border-color: #10b981;
  
      &:hover {
        background-color: #059669;
        border-color: #059669;
      }
    }
  }
  </style>